import { useNavigate } from "react-router-dom";
import yum_pcJPG from "@/assets/yum_pc.jpg";
import corpGuide_pcJPG from "@/assets/corpGuide_pc.jpg";
import guide_pcJPG from "@/assets/guide_pc.jpg";
import queryShop_pcJPG from "@/assets/queryShop_pc.jpg";

import Carousel from "./Carousel";
import styles from "./index.module.less";

const Home = () => {
  const navigate = useNavigate();

  return (
    <div className={styles["home-body"]}>
      <Carousel />
      <div style={{ position: "relative" }}>
        <img
          style={{ width: "100%", display: "block", minWidth: 950 }}
          src={yum_pcJPG}
          alt=""
        />
        <div
          className="btn"
          style={{ bottom: "8%" }}
          onClick={() => {
            navigate("/card/yum"); // 跳转到指定路径
          }}
        >
          点击了解更多
        </div>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          minWidth: 950,
        }}
      >
        <div className={styles["solo-card"]}>
          <img
            src={corpGuide_pcJPG}
            alt=""
            style={{ width: "100%", display: "block" }}
          />
          <div
            className="btn-white"
            style={{ bottom: "25%", width: 180 }}
            onClick={() => {
              navigate("/corpGuide"); // 跳转到指定路径
            }}
          >
            企业购卡
          </div>
        </div>
        <div className={styles["solo-card"]}>
          <img
            src={guide_pcJPG}
            alt=""
            style={{ width: "100%", display: "block" }}
          />
          <div
            className="btn-white"
            style={{ bottom: "25%", width: 180 }}
            onClick={() => {
              navigate("/guide"); // 跳转到指定路径
            }}
          >
            无卡消费攻略
          </div>
        </div>
      </div>
      <div style={{ minWidth: 950, width: "100%", position: "relative" }}>
        <img
          src={queryShop_pcJPG}
          alt=""
          style={{ width: "100%", display: "block" }}
        />
        <div
          className="btn-white"
          style={{
            width: 180,
            bottom: "40%",
            left: "78%",
          }}
          onClick={() => {
            navigate("/queryShop"); // 跳转到指定路径
          }}
        >
          查询餐厅
        </div>
      </div>
    </div>
  );
};

export default Home;
